import { useRef } from 'react';
import { FormGroup, DATA_ENTRY, FirstHeaderC, PrimaryC, SecondHeaderC } from '@/src/components/index';
import BussinessDemo from './bussinessDemo';
import { Space } from 'antd';
import moment from 'moment';

const FormGroupC = () => {
  const FormGroupRef = useRef();
  return (
    <div>
      <FirstHeaderC title='测试InputC/InputNumberC/SelectC/RANGESELECT' />
      <SecondHeaderC title='获取表单值在控制台' />
      <Space>
        <PrimaryC
          title='获取表单值'
          onClick={async () => {
            const formValues = await FormGroupRef.current.getFormGroupData();
            console.log(formValues);
          }}
        />
        <PrimaryC
          title='重置表单值'
          onClick={() => {
            FormGroupRef.current.resetFields();
          }}
        />
      </Space>
      <FormGroup
        dataSource={[
          { dataIndex: 'input', title: '输入框', type: DATA_ENTRY.INPUT, initialValue: 'xxxx' },
          {
            dataIndex: 'select',
            type: DATA_ENTRY.SELECT,
            allowClear: true,
            title: 'select下拉',
            dataSource: [
              { value: '1', title: '一' },
              { value: '2', title: '二' },
              { value: '3', title: '三' },
            ],
            initialValue: ['1'],
            // isMultiple: true,
            rules: [{ required: true, message: '不能为空!' }],
            // onRef: (ref) => (SELECTRef.current = ref),
          },
          {
            dataIndex: 'treeselect',
            title: '树形下拉',
            type: DATA_ENTRY.TREESELECT,
            dataSource: [
              { value: '1', title: '下拉选择1', children: [{ value: '11', title: 'dddd' }] },
              { value: '2', title: '下拉选择2' },
              { value: '3', title: '下拉选择3' },
            ],
            initialValue: ['1'],
            // loading: this.state.loading,
            isMultiple: true,
            allowClear: true,
            onChange: (e) => console.log(e),
            // disabled: this.state.disabled,
          },
          {
            dataIndex: 'inputnumber',
            title: '数字输入',
            type: DATA_ENTRY.INPUTNUMBER,
            disabled: true,
            unit: '元',
            splitStyle: true,
            initialValue: 123,
            rules: [{ required: true, message: '请输入数字!' }],
            // onRef: (ref) => (INPUTNUMBERRef.current = ref),
          },
          {
            dataIndex: ['rateRangeStart', 'rateRangeEnd'],
            title: '评级区间',
            type: DATA_ENTRY.RANGESELECT,
            // initialValue: ['1', '3'],
            dataSource: [
              [
                { title: '开始1', value: '0' },
                { title: '结束1', value: '1' },
              ],
              [
                { title: '开始2', value: '2' },
                { title: '结束2', value: '3' },
              ],
            ],
            // span: '24',
            // styleRow: { width: '30%' },
          },
          {
            dataIndex: 'singleDate',
            type: DATA_ENTRY.SINGLEDATE,
            title: ' 简单日期选择 ',
            disableBegin: moment('2023-05-01'),
            disableEnd: moment('2023-10-01'),
            initialValue: moment('2023-07-15'),
            allowClear: true,
            helper: '选择日期',
          },
          {
            dataIndex: ' simpleWeek ',
            title: ' 周选择 ',
            type: DATA_ENTRY.SIMPLEWEEK,
            initialValue: moment('2023-07-11'),
            allowClear: true,
          },
          {
            dataIndex: ['beginDate', 'endDate'],
            title: '日期区间',
            type: DATA_ENTRY.RANGEDATE,
            initialValue: [moment().subtract(1, 'year'), moment().subtract(5, 'day')],
            hasDataED: moment().subtract(1, 'day'),
            allowClear: true,
          },

          {
            selectIndex: 'complextdate1',
            startIndex: 'begin1',
            endIndex: 'end1',
            title: '日期区间',
            type: DATA_ENTRY.COMPLEXDATE,
            startOnChange: (e) => console.log(e),
            endOnChange: (e) => console.log(e),
            hasDataBD: moment('2023-05-01'),
            hasDataED: moment('2023-08-01'),
            initialValue: { beginDate: moment('2023-06-01'), endDate: moment('2023-07-01') },
            selfDefination: ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
          },
          {
            dataIndex: 'SimpleQuarterC',
            title: '季度选择',
            type: DATA_ENTRY.SIMPLEQUARTERC,
            highCurrentDate: false,
            initialValueQuarter: '3',
            yearKey: 'year1',
            quarterKey: 'quarter1',
            onQuarterChange: (data) => {
              console.log(data);
            },
            allowClear: true,
            rules: [[{ required: true, message: '请选择年份' }], [{ required: true, message: '请选择季度' }]],
          },
        ]}
        onRef={(ref) => {
          FormGroupRef.current = ref;
        }}
      />
      <BussinessDemo />
    </div>
  );
};

export default FormGroupC;
